<template>
  <div class="search">
    <!-- 头部 -->
    <div class="search_top_wrapper">
      <div class="search_wrapper flex">
        <!-- v-model.trim="keyword" -->
        <van-search
        ref="searchRef"
        v-model="keyword"
        @search="searchHandler(keyword)"
         @update:model-value="RTchange" 
         class="van_search"
          shape="round" autofocus />
      
          
        <div class="text" @click="clickHandler">取消</div>
        
      </div>
      <!-- 搜索时实时显示 -->
      <div class="RT_keyWord_list" v-if="!!keyword ">
        <div class="RT_header flex" v-for="item in albumList" :key="item.id">
          <img :src="item.imgPath" alt="">
          <div class="RT_img_detail flex_c">
            <div class="img_text" v-html="item.highlightKeyword"></div>
            <div class="img_type flex">
              <span class="book">{{ item.category }}</span>
              <span class="erji">{{ item.play }}</span>
              <span class="yuyin">{{item.tracks}}集</span>
            </div>
          </div>
          <van-icon name="play-circle" color="rgba(163,163,172,.2)" size="26"/>
        </div>
        <!-- 列表 -->
        <ul class="RT_form">
          <li class="RT_form_item" v-for="item in queryList" :key="item.id" @click="changeKey(item.keyword)">{{ item.keyword }}</li>
        </ul>
      </div>
      <!-- 搜索历史 -->
    
      <div v-else>
      <History  v-if="!keyword"  @clearHistoryList="clearHistoryList" :historyList="historyList"></History>
      <!-- 热词列表 -->
    <HotWordList v-if="!keyword" :historyList="historyList" @searchHandler="searchHandler"></HotWordList>
  </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import {ref,onMounted} from 'vue'
import _ from 'lodash'
import searchApi from '@/apis/search'
import History from '@/components/History.vue'
import HotWordList from '@/components/HotWordList.vue';
import type { CategoryValueModel,AnyObject,QueryObject } from '@/apis/search';

import { useRouter } from 'vue-router';
const keyword=ref('')
const router=useRouter()
const searchRef=ref<any>();
const historyList=ref<string[]>([])

const albumList=ref<QueryObject[]>([])
const queryList=ref<QueryObject[]>([])

const historyWord=ref('')

const  paidFilter='false'
onMounted(()=>{
  searchRef.value.focus();
  JSON.parse(sessionStorage.getItem('historyList')!) 
 if(JSON.parse(sessionStorage.getItem('historyList')!) ){
  historyList.value=JSON.parse(sessionStorage.getItem('historyList')!) 
 }

})
const clearHistoryList=()=>{
  historyList.value=[]
  sessionStorage.removeItem('historyList')
}

//获取实时搜索列表
const  RTchange=_.throttle(function (a:any){
  
  keyword.value=a;  
 
  
  getKeyWordList(keyword.value, paidFilter)

},500)



// 获取实时关键字列表
const getKeyWordList=async(keyword:string, paidFilter:string)=>{
  try {
    let res=await searchApi.reqKeyWordList(keyword, paidFilter)
   albumList.value=res.data.result.albumResultList
   queryList.value=res.data.result.queryResultList

  } catch (error) {
    console.log(error);
    
  }
}
// 点击取消回退
 const clickHandler=()=>{
  router.go(-1)
 }

 const searchHandler=(e:any)=>{

if(!e) return
  historyWord.value=e.trim()
   
historyList.value.unshift(historyWord.value)

const set=new Set(historyList.value)
historyList.value=Array.from(set)


sessionStorage.setItem('historyList',JSON.stringify(historyList.value))
  
  //跳转 搜索结果列表
    router.push({
      name:"Searchdetail",
      params:{
        keyWord:e
      }})
  // // 判断Token 是否存在
  // if(localStorage.getItem('xmtoken')){
  //   // 跳转 搜索结果列表
  //   router.push({
  //     name:"Searchdetail",
  //     params:{
  //       keyWord:e
  //     }
  //   })

  //   }else{

  //     // 不存在，跳转登录界面
  //     router.push({
  //     path:'/login'

  //   })
  //   }
   
  }

  const  changeKey=(item:string)=>{
 
 //  console.log(item);
 router.push({
       name:"Searchdetail",
       params:{
         keyWord: item
       }
     })
 
   // 判断token是否存在
  //  if(localStorage.getItem('xmtoken')){
  //    // 跳转 搜索结果列表
  //    router.push({
  //      name:"Searchdetail",
  //      params:{
  //        keyWord: item
  //      }
  //    })
 
  //    }else{
 
  //      // 不存在，跳转登录界面
  //      router.push({
  //      path:'/login'
 
  //    })
  //    }
 }


</script>

<style lang="less" scoped>
.search{
  
  font-size: 16px;
  width: 100%;
  
  .search_top_wrapper{
    padding: 0 14px;
 
    // 搜索时显示
    .search_wrapper{
     
     padding: 8px 0;
     height: 30;
     align-items: center;
     justify-content: space-between;
     .van_search{
       flex: 1;
       padding: 0;
     }
     .text{
       padding-left: 10px;
      
     }
    
 
   }
    .RT_keyWord_list{
      
      .RT_header{
        padding: 15px 0;
        height: 40px;
        align-items: center;
        img{
          width: 40px;
          height: 40px;
          margin-right:10px ;
        }
        .RT_img_detail{
          width: 263px;
          height: 40px;
          justify-content: space-between;
          
          .img_text{
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-bottom: 4px;

          }
          .img_type{
            height: 16px;
            font-size: 10px;
            color:#a3a3ac;
            text-align: center;
            line-height: 16px;

            span{
              margin-right: 15px;
            }
            .book{
              border:1px solid #a3a3ac;
              border-radius: 4px;
              

            }
            .erji{
              &::before{
                content: "\e608";
                font-family: "iconfont";
                margin-right: 3px;
                font-size: 14px;

              }
            }
            .yuyin{
              &::before{
                content: '\e682';
                font-family: "iconfont";
                margin-right: 3px;
                font-size: 18px;
                
              }
            }
          }
        }

      }
      .RT_form{
          border-top: 1px solid #ccc;

        .RT_form_item{
          font-size: 14px;
          color: #40404c;
          border-bottom: 1px solid #ccc;
          height: 40px;
          line-height: 40px;


        }
      }
    }
  
}
  
  /deep/.van-tab--active{
    font-size: 16px;
    font-weight: 400;
  }
  
}

</style>